<template>
	<view class="main">
		<tou_hand1 handtitle='未结算订单'></tou_hand1>
		<navigator url="../records_consumption/records_consumption" hover-class="none">
			<van-notice-bar :scrollable="true" left-icon="volume-o">
				<!-- 因网络原因无法打开柜门,请前往个人中心-查看更多-消费记录,查看开柜密码打开柜门 -->
			</van-notice-bar>
		</navigator>
		<view class="hand" v-show="showlist.length!=0">
			<van-pull-refresh v-model="refreshing" @refresh="onRefresh">
			<van-list v-model="loading"  :finished="finished" finished-text="没有更多了" @load="loadMore">
				<van-cell v-for="(item,index) in showlist" :key="index" @click="onDetail(item.id,item.deviceId,item.isCharge)">
					<view class="show">
						<view class="showhand">
							<view class="hleft">
								<span>充电柜编号：{{item.code}}</span>
							</view>
							<view class="hright" v-show="item.isCharge==0">充电中</view>
							<view class="hright" v-show="item.isCharge==1">未结算</view>
						</view>
						<view class="showfoot">
							<view class="fleft">
								订单编号：{{item.orderNum}}
							</view>
							<view class="fleft">
								小区名称：{{item.projectName}}
							</view>
							<view class="fleft">
								开始时间：{{item.startTime}}
							</view>
							<view class="fleft">
								开柜密码：{{item.password}}
							</view>
						</view>
					</view>
				</van-cell>
			</van-list>
			</van-pull-refresh>
		</view>
		<view class="notap" v-show="showlist.length==0">
			<image src="https://qiniu.jxyutuo.com/yanqin/tabBarimg//zwdd.png"></image>
			暂无订单
		</view>
		
	</view>
</template>

<script>
	import tou_hand1 from '../../components/tou_hand2/tou_hand2.vue'
	export default {
		components: {
			tou_hand1
		},
		mounted() {
			document.querySelector('body').setAttribute('style', 'background-color:#2A3034')
		},

		data() {
			return {
				loading: false,
				finished: false,
				refreshing: false,
				pageNum: 1, //页码
				pageSize: 10, //每页显示的条数
				showlist: [], //正在充电的设备列表数据
				deviceId:'',//设备编号
			}
		},
		onLoad(option) {
			this.deviceId=option.deviceId
		},
		onShow() {
			this.showlist = [];
			this.onRefresh();
		},
		methods: {
			onDetail(id,deviceId,isCharge) {
				
				uni.navigateTo({
					url: '../unsettled_order_detail/unsettled_order_detail?id='+id+'&codetype='+1+'&isCharge='+isCharge
				})
			},
			
			// 分页
			loadMore() {
				if (this.refreshing) {
				  this.showlist = [];
				  this.refreshing = false;
				}
				const that = this;
				let data = {
					pageNum: that.pageNum,
					pageSize: that.pageSize,
					deviceId:this.deviceId
				}
				that.loading = true;
				that.$base.request('charging/occ/list', 'GET', data)
					.then(res => {
						that.loading = false;
						if(res.data.rows&&res.data.rows.length>0){
							that.showlist = that.showlist.concat(res.data.rows);
							that.pageNum += 1;
						}else{
							that.finished = true;
						}
					})
					.catch(err => {
				
					})
			},
			 onRefresh() {
			      // 清空列表数据
			      this.finished = false;
				  this.pageNum=1
			      // 重新加载数据
			      // 将 loading 设置为 true，表示处于加载状态
			      this.loading = true;
			      this.loadMore();
			    },
		}
	}
</script>

<style lang="scss" scoped>
	.main {
		width: 100%;
		// overflow-x: hidden;
		margin-bottom: 140upx;
		/deep/.van-list__finished-text{
			margin-top: 100upx;
			padding-bottom: 200upx;
		}
		/deep/.van-hairline--top-bottom::after{
			border-width: 0;
		}
		/deep/.van-cell{
			background-color: #2A3034;
		}
		/deep/.van-cell:not(:last-child)::after{
			border-bottom: 0upx;
		}
		/deep/.van-notice-bar {
			background-color: #2A3034;
			color: #FFFFFF;
			padding: 0 46upx;
		}
		.hand{
			width: 100%;
		}
		.show {
			margin-top: 85upx;
			width: 686upx;
			margin: 0 auto;
			background-color: #3A4044;
			box-sizing: border-box;
			padding: 10upx 20upx;
			border-radius: 16upx;
		
			.showhand {
				width: 100%;
				box-sizing: border-box;
				display: flex;
				justify-content: space-between;
				border-bottom: 1upx solid #4A4E52;
				padding: 24upx 29upx 12upx 11upx;
		
				.hleft {
					font-size: 28upx;
					font-family: PingFang SC Bold, PingFang SC Bold-Bold;
					font-weight: 700;
					color: #fff;
				}
		
				.hright {
					font-size: 28upx;
					font-family: PingFang SC Bold, PingFang SC Bold-Bold;
					font-weight: 700;
					color: #8DC321;
				}
			}
		
			.showfoot {
				width: 100%;
				box-sizing: border-box;
				padding: 13upx 0upx 24upx 13upx;
		
				.fleft {
					font-size: 28upx;
					font-family: PingFang SC Medium, PingFang SC Medium-Medium;
					font-weight: 500;
					line-height: 60upx;
					color: #D0D0D0;
				}
		
				.fright {
					font-size: 24upx;
					font-family: PingFang SC Medium, PingFang SC Medium-Medium;
					font-weight: 500;
					color: #333333;
					margin-top: 14upx;
				}
			}
		}
		.notap{
			width: 245upx;
			margin: 0 auto;
			text-align: center;
			margin-top: 300upx;
			image{
				width: 245upx;
				height: 176upx;
				margin-bottom: 36upx;
			}
			font-size: 26upx;
			font-family: PingFangSC-Regular, PingFang SC;
			font-weight: 400;
			color: #6E7071
		}
	}
</style>
